請問你使用的是 Bootstrap 還是 Tailwind CSS？

先前待的公司是屬於網頁接案類型，會依據客戶的產業類別、文案去做客製化網站。
每個案子的設計一定都是獨一無二的，接著我們來對比兩者使用上的差異。

舉例來說，網頁很常見的元素有卡片，這裡以卡片為例。（圖片來源：unsplsh）

Bootstrap 寫法 - codepen 連結

<div class="card" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzh8fHRyYXZlbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="travel">
  <div class="card-body">
    <h5 class="card-title">旅遊真好玩!!</h5>
    <p class="card-text">退休後，我想去環遊世界。去看看這寬廣的世界。</p>
  </div>
</div>

Tailwind CSS 寫法 - codepen 連結

<div class="w-72 overflow-hidden rounded border">
  <img src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzh8fHRyYXZlbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="travel">
  <div class="p-4">
    <h5 class="text-xl mb-2">旅遊真好玩!!</h5>
    <p>退休後，我想去環遊世界。去看看這寬廣的世界。</p>
  </div>
</div>

上面兩段程式碼最終呈現都是上方的卡片，顯而易見我們能看出兩段程式碼有極大的差異：

Bootstrap

1. 官方 Bootstrap 本身就提供許多元件，透過官方文件找尋我們想要的元件並複製程式碼即可快速開發及使用。
2. 由於是寫好的元件，相對地客製化較受侷限。
3. 樣式本身已經寫好在 class 名稱中，ex: .card 、 .card-body 、 .card-title 、 .card-text，若修改 class 名稱或移除會衍伸出跑版等問題。

Tailwind CSS

1. 所有的 class 名稱都是透過 utility 形式產生，運用各種不同的 utility 拼成我們想要的樣子，相對客製化的自由度也比較高。
2. 因為都是 utility，就沒有 Bootstrap 那種寫好的元件能立即使用，對於手刻能力相對要求。

本日重點

1. 無論使用 Bootstrap 還是 Tailwind CSS 開發，並沒有一定，在該情境下使用最適合的進行開發，兩者都學習並靈活運用對於開發也會有事半功倍的效果。
2. Bootstrap 客製化較受侷限，但有許多現成元件，可以快速開發，提升開發效率。
3. Tailwind CSS 客製化的自由度高，但相較使用 Bootstrap 更考驗手刻能力。

參考

• Bootstrap 官網
• Bootstrap 官網 - 卡片元件
• Tailwind CSS 官網